<template>
  <el-drawer class="el-drawer" v-model="settingConfig.showConfig" size=22% :show-close=false>
    <div class="config_item">
      <span class="demonstration">主题颜色</span>
      <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="setColor"/>
    </div>
    <div class="config_item">
      <span class="demonstration">暗黑模式</span>
      <el-switch v-model="dark" size="small" class="ml-2" @change="changeDark"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
    </div>
    <div class="conbar">自定义配置</div>
    <div class="config_item">
      <span>显示Logo</span>
      <el-switch v-model="logoConfig" size="small" class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
    </div>
    <div class="config_item">
      <span>开启底部栏</span>
      <el-switch v-model="bottomConfig" size="small" class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
    </div>
    <div class="config_item">
      <span>显示Logo</span>
      <el-switch v-model="value2" size="small" class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div class="save">
      <el-button type="primary" icon="Search" plain @click="saveConfig">保存配置</el-button>
      <el-button icon="Search" plain>重置配置</el-button>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useSettingConfig } from '@/store/modules/setting'
const value2 = ref(true)
const dark = ref(false)
let settingConfig = useSettingConfig();
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
// 颜色设置
function setColor() {
  let htmlStyle = document.documentElement;
  htmlStyle.style.setProperty('--el-color-primary', color.value)
  
}
// 暗黑模式
function changeDark() {
  // 获取html根节点  
  let html = document.documentElement;
  dark.value ? html.className = 'dark' : html.className = '';
  if (dark.value) {
    settingConfig.theme = 'dark';
  } else {
    settingConfig.theme = 'default';
  }
  
}
// logo显示配置
const logoConfig = computed({
  get: () => settingConfig.logoHidden,
  set: (val) => {
    settingConfig.changeConfig({ key: 'logoHidden', value: val })
  }
})
// 底部栏显示配置
const bottomConfig = computed({
  get: () => settingConfig.showFooter,
  set: (val) => {
    settingConfig.changeConfig({ key: 'showFooter', value: val })
  }
})
// 配置保存
function saveConfig() {
  // 动态保存
  let systemConfig = {
    logoShow: settingConfig.logoHidden,
    footerShow: settingConfig.showFooter
  }
  // localStorage 中的键值对总是以字符串的形式存储
  window.localStorage.setItem('systemConfig', JSON.stringify(systemConfig));
  setTimeout('window.location.reload()', 100)
}
</script>
<style lang="scss" scoped>
.el-drawer {
  .conbar {
    margin: 10% 0;
    padding-top: 20%;
    font-weight: 700;
    font-size: 20px;
    border-top: 2px solid #bababa;
  }

  .config_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 15px;
  }

  .save {
    margin-top: 12%;
  }
}
</style>
